/* pages/device/info/channal/index.wxss */
.channalPage {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.iconList {
    padding: 46rpx 0;
    display: flex;

    .item {
        width: 25%;
        display: flex;
        justify-content: center;

        .icon {
            display: flex;
            flex-direction: column;
            text-align: center;
            font-size: 24rpx;
            color: #343a40;
            gap: 14rpx;

            .iconfont {
                font-size: 52rpx;
            }
        }
    }
}

.timeLine {
    width: 100%;

    .inBox {
        display: flex;
        flex-direction: column;

        .scale {
            width: 1754rpx;

            .scaleImg {
                width: 100%;
            }
        }

        .bar {
            width: 1754rpx;

            .barImg {
                width: 100%;
                height: 88rpx;
            }
        }
    }
}

.timeControl {
    display: flex;
    justify-content: center;
    gap: 34rpx;
    padding-bottom: 24rpx;

    .pointer {
        background: #c4c4c4;
        height: 44rpx;
        line-height: 44rpx;
        font-size: 20rpx;
        padding: 0 30rpx;
        border-radius: 22rpx;
        position: relative;

        &::before {
            content: '';
            display: block;
            background: #343a40;
            width: 2rpx;
            height: 180rpx;
            left: calc(50% - 1rpx);
            top: 44rpx;
            position: absolute;
            z-index: 2;
        }
    }
}

.legend {
    padding: 12rpx 38rpx;
    display: flex;
    gap: 38rpx;

    .item {
        font-size: 24rpx;
        position: relative;
        line-height: 24rpx;
        height: 24rpx;
        display: flex;
        gap: 14rpx;

        &::before {
            content: '';
            display: inline-block;
            background: #058aff;
            width: 24rpx;
            height: 24rpx;
            border-radius: 6rpx;
        }

        &.red {
            &::before {
                background: #ff6b6b;
            }
        }
    }
}

.recordInfo {
    padding: 24rpx;
    background: #fff;

    .info {
        display: flex;
        flex-direction: column;
        gap: 12rpx;

        .item {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;

            .value {
                font-weight: 600;
                color: #058aff;
            }
        }
    }
}

.pageTitle {
    display: flex;
    justify-content: space-between;
    font-size: 20rpx;
    color: #8b8c8f;

    .title {
        font-size: 32rpx;
        color: #000;
        font-weight: 600;
    }

    padding-bottom: 24rpx;

}